.cl-radio {
	display: inline-flex;
	align-items: center;
	margin-right: 20rpx;

	&__input {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		box-sizing: border-box;
		border: 1px solid #ddd;
		border-radius: 40rpx;
		transition: all 0.3s;
		position: relative;

		text {
			font-size: 24rpx;
			position: absolute;
		}
	}

	&__label {
		display: inline;
		margin-left: 14rpx;
		font-size: 26rpx;
	}

	&.is-checked {
		.cl-radio__input {
			background-color: $cl-color-primary;
			border-color: $cl-color-primary;
			color: #fff;
		}
	}

	&.is-disabled {
		.cl-radio__input {
			background-color: #f5f7fa;
			border-color: #e4e7ed;
			color: #c0c4cc;
		}

		.cl-radio__label {
			color: #c0c4cc;
		}
	}

	&.is-border {
		border-radius: 10rpx;
		padding: 10rpx 30rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid #ddd;
		box-sizing: border-box;
		line-height: normal;

		.cl-radio__input {
			display: none;
		}

		.cl-radio__label {
			margin-left: 0;
		}

		&.is-checked {
			border: 1rpx solid $cl-color-primary;
			background-color: $cl-color-primary;
			color: #fff;
		}
	}

	&.is-fill {
		justify-content: center;
		width: 100%;
	}
}

// #ifdef MP
cl-radio {
	display: inline-flex;
}

.cl-radio-group {
	&.is-fill {
		cl-radio {
			display: inline;
		}
	}
}
// #endif
